// 1,导入axios
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 2,创建一个axios实例对象
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 加载数据的时候打开和关闭动效的对象
const loading = {
  loadingInstance: null, // Loading实例
  open: function () {
    // 打开加载
    console.log('加载中' + this.loadingInstance)
    if (this.loadingInstance === null) {
      console.log('创造加载实例')
      this.loadingInstance = Loading.service({
        text: '拼命加载中',
        target: 'main', // 显示加载区域
        background: 'rgba(0,0,0,0.5)'
      })
    }
  },
  close: function () {
    // 关闭加载
    if (this.loadingInstance !== null) {
      this.loadingInstance.close()
      console.log('结束加载')
    }
    this.loadingInstance = null // 回归原状
  }
}
// 请求拦截
request.interceptors.request.use(config => {
  loading.open() // 打开加载效果
  return config
}, error => {
  loading.close()
  return Promise.reject(error)
})

// 响应拦截
request.interceptors.response.use(config => {
  loading.close() // 关闭加载效果
  // 处理异常
  const resp = config.data
  if (resp.code !== 2000) {
    this.$message.warning('系统异常' || resp.message)
  }
  return config
}, error => {
  loading.close()
  // 处理异常
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

// 3,导出这个封装好的实例
export default request
